<template>
  <div class="result-wrapper">
    <div class="background-overlay"></div>

    <div v-if="type" class="result-card">
      <h2>你的 MBTI 类型是：<span class="mbti-type">{{ type }}</span></h2>
      <div class="description">
        <p v-for="(paragraph, index) in description.overview" :key="'overview-'+index">{{ paragraph }}</p>

        <h3>（1）领导模式：</h3>
        <ul>
          <li v-for="(item, index) in description.leadership" :key="'lead-'+index">{{ item }}</li>
        </ul>

        <h3>（2）学习模式：</h3>
        <ul>
          <li v-for="(item, index) in description.learning" :key="'learn-'+index">{{ item }}</li>
        </ul>

        <h3>（3）解决问题模式：</h3>
        <ul>
          <li v-for="(item, index) in description.problemSolving" :key="'solve-'+index">{{ item }}</li>
        </ul>

        <h3>工作环境倾向性：</h3>
        <ul>
          <li v-for="(item, index) in description.workEnvironment" :key="'work-'+index">{{ item }}</li>
        </ul>

        <h3>潜在的缺点：</h3>
        <ul>
          <li v-for="(item, index) in description.weaknesses" :key="'weak-'+index">{{ item }}</li>
        </ul>

        <h3>发展建议：</h3>
        <ul>
          <li v-for="(item, index) in description.development" :key="'develop-'+index">{{ item }}</li>
        </ul>

        <h3>适合领域：</h3>
        <ul>
          <li v-for="(item, index) in description.suitableFields" :key="'field-'+index">{{ item }}</li>
        </ul>

        <h3>适合职业：</h3>
        <ul>
          <li v-for="(item, index) in description.suitableJobs" :key="'job-'+index">{{ item }}</li>
        </ul>
      </div>
    </div>

    <div v-else class="no-result-card">
      <p>暂无测试结果，请先完成测试。</p>
    </div>
  </div>
</template>

<script>
import mbtiDescriptions from "./mbtiDescriptions";

export default {
  data() {
    return {
      type: "",
      description: null,
    };
  },
  mounted() {
    // 只有完成测试后才展示结果
    const completed = sessionStorage.getItem("mbtiCompleted") === "true";
    const resultStr = sessionStorage.getItem("mbtiResult");

    if (completed && resultStr) {
      const result = JSON.parse(resultStr);
      this.type = result.type;
      this.description = mbtiDescriptions[this.type] || {
        overview: ["暂无该类型解释"],
        leadership: [],
        learning: [],
        problemSolving: [],
        workEnvironment: [],
        weaknesses: [],
        development: [],
        suitableFields: [],
        suitableJobs: [],
      };
    } else {
      this.type = "";
      this.description = null;
    }
  },
};
</script>

<style scoped>
.result-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd, #fce4ec);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px 20px;
}

.background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background:
      radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 70%),
      radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.result-card,
.no-result-card {
  background:
      linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.6),
          rgba(255, 255, 255, 0.3)
      );
  padding: 30px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  width: 100%;
  z-index: 1;
  text-align: left;
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

.mbti-type {
  font-size: 36px;
  font-weight: bold;
  color: #409eff;
}

.description h3 {
  margin-top: 24px;
  color: #409eff;
}

.description ul {
  padding-left: 20px;
  margin-top: 8px;
  margin-bottom: 16px;
  list-style-type: disc;
  color: #444;
}

.description p {
  margin-top: 12px;
  color: #555;
}

.no-result-card p {
  font-size: 20px;
  text-align: center;
  color: #555;
}
</style>
